<template>
  <div>
    <comment-header @changeTab="handleChangetab"></comment-header>
    <ul  class="content-warp" v-show="tabType==0">
        <strategy v-for="(gonglue, index) of  gonglueList" :key="index" :gonglueItem="gonglue"></strategy>
    </ul>
    <div class="content-warp"  v-show="tabType==1">
      <div class="content-header border-bottom">
        <div class="comment-total">
          综合评分 &nbsp;
          <span class="comment-start">
            <i class="startlevel-gain iconfont" >&#xe6b0;&#xe6b0;&#xe6b0;&#xe6b0;&#xe6b0;</i>
            <i class="startlevel-total iconfont">&#xeeff;&#xeeff;&#xeeff;&#xeeff;&#xeeff;</i>
          </span>
          <span class="gain-score">4.9</span>
          <span class="total-score">/5分</span>
        </div>
      </div>
      <!-- 点评列表 -->
      <ul class="dianping-wrap">
        <dianping  v-for="(dianping, index) of  dianpingList" :key="index" :dianpingItem="dianping"></dianping>
      </ul>
    </div>
  </div>
</template>

<script>
import CommentHeader from './components/header.vue'
import Strategy from './components/strategy.vue'
import Dianping from './components/dianping.vue'
import axios from 'axios'
export default {
  props: {},
  data () {
    return {
      tabType: 0, // 0:攻略，1:评论
      gonglueList: [],
      dianpingList: []
    }
  },
  methods: {
    handleChangetab: function (type) {
      // type :0 攻略 ，type :1 点评
      this.tabType = type
    },
    getCommentList: function () {
      axios.get('/api/gonglue.json').then((res) => {
        res = res.data
        if (res.ret && res.data) {
          this.gonglueList = res.data.gonglueList
        }
      })
    },
    getDianpingList: function () {
      axios.get('/api/dianping.json').then((res) => {
        res = res.data
        if (res.ret && res.data) {
          this.dianpingList = res.data.dianpingList
        }
      })
    }
  },
  components: {
    CommentHeader,
    Strategy,
    Dianping
  },
  computed: {},
  mounted () {
    this.getCommentList()
    this.getDianpingList()
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
.content-warp
  margin-top :$headerHeight
  .content-header
    padding :0.3rem 0
    .comment-total
      padding-left :0.3rem
      color :#313131
      height :0.3rem
      line-height :0.3rem
      .comment-start
        position :relative
        width :1.66rem
        .startlevel-gain
          color :#ffb436
          z-index :2
        .startlevel-total
          color :#e0e0e0
        .startlevel-gain,.startlevel-total
          position: absolute
          top: 0
          left :0
      .gain-score
        color :#ff8300
        margin-left :2rem
</style>
